<template>
  <article>
    <div class="walking" v-if="node.title">
      <div class="left" id="left">
        <i class="icon-walking"></i>
      </div>
      <div class="right" @click="goDetail(node)">
<!--        <h5 class="top-my"><span @click="goDetail(item,index)" v-for="(item,index) in list">{{ item.title }}</span></h5>-->
        <h5 class="top-my" id="box"><div id="marquee" class="marquee">{{node.title}}</div></h5>
      </div>
      <div id="node">{{node.title}}</div>
    </div>
  </article>
</template>

<script>
export default {
  name: "walkingComponent",
  props: [],
  data(){
    return{
      node:{
        title:'', //24个字会铺满
      },
      minSize:24, //最小长度
      intervalID:null,
      distance:0,
    }
  },
  mounted() {
    setTimeout(()=>{
      this.tzggAppShowView();
    },4)
  },
  beforeDestroy () {
    clearInterval(this.intervalID);
  },
  methods: {
    lang() {
      this.$nextTick(() => {
        if (!this.node.title) {
          return clearInterval(this.intervalID)
        }
        if(document.querySelectorAll('.marquee').length < 2) {
          let nodeMarquee = document.querySelectorAll('.marquee')[0];
          if (nodeMarquee === undefined) return false;
          let secondMarqureEl = nodeMarquee.cloneNode(true);
          document.getElementById('box').insertBefore(secondMarqureEl, nodeMarquee);
        }else{
          return false;
        }
        setTimeout(() => {
          this.marquee();
        }, 4)
      })
    },
    marquee () {
      clearInterval(this.intervalID)
      let marqueeWidth = document.getElementById('node').getBoundingClientRect().width //真实的宽度
      let leftWidth = document.getElementById('left').clientWidth
      let width = document.body.clientWidth
      let box = document.getElementById('box');
      let halfViewBoxWidth = (width - leftWidth) / 2;
      let boxWidth = marqueeWidth * 2 + halfViewBoxWidth;
      box.style.width = `${boxWidth}px`;

      document.querySelectorAll('.marquee')[1].style.marginLeft = `${halfViewBoxWidth}px`;
      this.distance = width-leftWidth;
      let distance = this.distance // 位移距离
      //设置位移
      this.intervalID = setInterval(() => {
        distance = distance - 1
        // 如果位移超过文字宽度，则回到起点
        if (-distance >= marqueeWidth + halfViewBoxWidth) {
          distance = 0
        }
        box.style.transform = 'translateX(' + distance + 'px)'
      }, 80);
    },
    stoplang() {
      clearInterval(this.intervalID)
      this.intervalID = null;
    },
    tzggAppShowView(){
      this.fetchService.tzggAppShowView().then((res) => {
        if (res.code === 0) {
          this.node = res.data;
          // this.node.title = '党员朋友们，请于6月20日前，将您个人账号的登录密码修改为8—18位，格式为字母+数字+特殊符号，如xhf2357@#，感谢您的支持！谢谢'
          // this.node.title = "网页可见区域宽document.body.clientWidth网页可见区域宽";
          setTimeout(() => {
            this.lang();
          }, 4);
        }
      });
    },
    goDetail(data,index) {
      let params = {
        msgId: data.id,
      };
      this.fetchService.optNodeMsgRead(params).then((res) => {
        if (res.code !== 0) {
          return;
        }
      });
      let params1 = {
        isRead: "1",
        recId: data.id,
      };
      this.fetchService.updateBox(params1).then((res) => {
        if (res.code !== 0) {
          return;
        }
      });
      this.$router.push({
        path: `/noticeNoticeDetail/${data.id}/0`,
      });
    },
  },
  /*//页面进入事件
  activated(){
    this.lang();
  },*/
  /*//离开页面事件
  deactivated(){
    this.stoplang()
  },*/
}
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

.walking {
  display: flex;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    //走马灯效果左侧图标
    .icon-walking {
      display: inline-block;
      background: url('../../../static/images/dangjian/home/icon-top-my-msg.png') no-repeat center;
      width: 0.6rem;
      height: 0.6rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
      margin-left: 0.13333rem;
    }
  }

  .right {
    width: 100%;
    overflow: hidden;
    .top-my {
      .marquee{
        font-size: 14PX;
        font-weight: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;
        white-space:nowrap;
      }
    }
  }
}

//限制外框宽度，隐藏多余的部分
.wrap {
  overflow: hidden;
}
// 移动框宽度设置
#box {
  width: 10000px;
  transform: translateX(10000px)
}
// 文字一行显示
#box div {
  float: left;
}
// 获取宽度的节点，隐藏掉
#node {
  position: absolute;
  z-index: -999;
  top: -999999px;
  font-size: 14PX;
  display:block;
  word-break:keep-all;
  white-space:nowrap;
  visibility: hidden;
  overflow:hidden;
}
</style>
